내장 AI를 통한 언어 감지

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Thomas Steiner

게시일: 2024년 9월 24일, 최종 업데이트: 2025년 5월 20일

설명 동영상	웹	확장 프로그램	Chrome 상태	인텐트
MDN	Chrome 138 베타	Chrome 138 베타	View	배송 의도

텍스트를 한 언어에서 다른 언어로 번역하기 전에 먼저 지정된 텍스트에 사용된 언어를 확인해야 합니다. 이전에는 번역을 하려면 텍스트를 클라우드 서비스에 업로드하고 서버에서 번역을 실행한 후 결과를 다운로드해야 했습니다.

Language Detector API는 클라이언트 측에서 작동하므로 사용자 개인 정보를 보호할 수 있습니다. 이를 실행하는 특정 라이브러리를 제공할 수는 있지만 다운로드하는 데 추가 리소스가 필요합니다.

언어 감지를 사용해야 하는 경우

Language Detector API는 주로 다음과 같은 시나리오에서 유용합니다.

• 입력 텍스트의 언어를 결정하여 번역할 수 있도록 합니다.
• 유해성 감지와 같은 언어별 태스크에 적절한 모델을 로드할 수 있도록 입력 텍스트의 언어를 결정합니다.
• 온라인 소셜 네트워킹 사이트와 같이 올바르게 라벨을 지정할 수 있도록 입력 텍스트의 언어를 결정합니다.
• 입력 텍스트의 언어를 결정하여 앱의 인터페이스를 적절하게 조정할 수 있습니다. 예를 들어 벨기에 사이트에서 프랑스어를 사용하는 사용자와 관련된 인터페이스만 표시할 수 있습니다.

시작하기

Language Detector API는 Chrome 138 안정화 버전부터 사용할 수 있습니다. 기능 감지를 실행하여 브라우저가 Language Detector API를 지원하는지 확인합니다.

if ('LanguageDetector' in self) {
  // The Language Detector API is available.
}

모델 다운로드

언어 감지는 언어 감지의 특정 태스크에 맞게 미세 조정된 모델에 종속됩니다. API는 브라우저에 빌드되지만 모델은 사이트에서 API를 처음 사용하려고 할 때 주문형으로 다운로드됩니다. Chrome에서는 이 모델이 다른 모델에 비해 매우 작습니다. 이 모델은 다른 Chrome 기능에서 사용되므로 이미 있을 수 있습니다.

모델을 사용할 준비가 되었는지 확인하려면 비동기 LanguageDetector.availability() 함수를 호출하고 결과 약속을 검사합니다. 다음과 같은 세 가지 응답이 가능합니다.

• "unavailable": 요청된 옵션이 지원되지 않거나 모델에 메시지를 표시할 수 없습니다.
• "downloadable": 요청이 지원되지만 세션을 만들기 전에 추가로 다운로드해야 합니다. 이러한 다운로드에는 언어 모델 또는 미세 조정이 포함될 수 있습니다.
• "downloading": 요청이 지원되고 다운로드가 진행 중이며 세션을 만들기 전에 완료해야 합니다.
• "available": 요청이 지원되며 세션을 만들 수 있습니다.

다운로드를 트리거하고 언어 감지기를 인스턴스화하려면 비동기 LanguageDetector.create() 함수를 호출합니다. availability()에 대한 응답이 'downloadable' 또는 'downloading'인 경우 다운로드에 시간이 걸리는 경우 사용자에게 알릴 수 있도록 다운로드 진행률을 리슨하는 것이 좋습니다.

다음 예는 언어 감지기를 초기화하는 방법을 보여줍니다.

const availability = await LanguageDetector.availability();

let detector;
if (availability === 'unavailable') {
  // The language detector isn't usable.
  return;
}
if (availability === 'available') {
  // The language detector can immediately be used.
  detector = await LanguageDetector.create();
} else {
  // The language detector can be used after model download.
  detector = await LanguageDetector.create({
    monitor(m) {
      m.addEventListener('downloadprogress', (e) => {
        console.log(`Downloaded ${e.loaded * 100}%`);
      });
    },
  });
  await detector.ready;
}

언어 감지기 실행

Language Detector API는 순위 모델을 사용하여 지정된 텍스트에서 가장 많이 사용될 가능성이 높은 언어를 결정합니다. 랭킹은 항목 목록을 정렬하는 것을 목표로 하는 머신러닝의 한 유형입니다. 이 경우 Language Detector API는 언어를 확률이 높은 순서대로 정렬합니다.

detect() 함수는 첫 번째 결과, 가장 가능성 있는 답변을 반환하거나 신뢰도 수준을 사용하여 순위가 지정된 후보를 반복할 수 있습니다. 이는 {detectedLanguage, confidence} 객체 목록으로 반환됩니다. confidence 수준은 0.0 (가장 낮은 신뢰도)과 1.0 (가장 높은 신뢰도) 사이의 값으로 표현됩니다.

const someUserText = 'Hallo und herzlich willkommen!';
const results = await detector.detect(someUserText);
for (const result of results) {
  // Show the full list of potential languages with their likelihood, ranked
  // from most likely to least likely. In practice, one would pick the top
  // language(s) that cross a high enough threshold.
  console.log(result.detectedLanguage, result.confidence);
}
// (Output truncated):
// de 0.9993835687637329
// en 0.00038279531872831285
// nl 0.00010798392031574622
// ...

API 플레이그라운드

API 플레이그라운드에서 Language Detector API를 실험해 보세요. 텍스트 영역에 여러 언어로 작성된 텍스트를 입력합니다.

표준화 작업

Chrome팀은 W3C 기술 아키텍처 그룹에 의견을 요청하고 Mozilla 및 WebKit에 표준 관련 입장을 요청했습니다.

의견 공유

Language Detector API로 빌드하는 제품을 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유하세요.

Chrome 구현에 관한 의견이 있으면 Chromium 버그를 신고하세요.